온 등봉 Onsen UI를 기초부터 내부 구조까지 이해하기 위한 슬라이드 모음 Onsen UI 개발 멤버의 입니다. 그 때문에 최근에는 Onsen UI의 개발·실장에 자원을 전부 휘두르는 것을 앞두고, 국내에서의 주지 활동의 일환으로서 이벤트로의 등단을 실시하고 있습니다. Onsen UI는 2016/09/15에 버전 2의 정식 릴리스를 맞이했습니다. 이 슬라이드는 그 전에 Onsen UI 2의 새로운 기능(Material Design 지원, 프레임워크 독립적, Auto... WebComponents코르도바하이브리드 앱온 등봉ProgressiveWebApps [monaca][onsenui][AngularJS][ui-router]onsenui/ui-router 최소 프로젝트 monaca에서 onsenui와 ui-router를 동시에 도입하는 데는 약간의 시간이 걸리므로 최소한의 프로젝트를 구성하는 방법을 절차화해 보았습니다. "Onsen UI V2 Angular 1 Minimum"에 "angular-ui-router"만 도입하면 다음 오류가 발생합니다. index.html 자바 스크립트의로드 순서가 원래로드해야하는 순서와 다르기 때문에 (그렇습니다) loader... Angularui-router온 등봉monaca Onsen UI로 VR 앱도 얼굴 인식 앱도, 로봇 연계 앱도 만들어 보았다. 3, 4년 정도 전부터 Onsen UI를 사용한 앱을 만들어 왔습니다! 이번은 모처럼이므로 최근 Onsen UI를 사용하여 만들어 보았던 앱을 몇 가지 소개합니다. 다만, Pokémon GO 가 폭발적인 히트를 날리고 있을 무렵,Mozilla 로부터 라고 하는 WebVR 프레임워크가 나와 있는 것을 알고, 라고 생각 Pokémon GO풍의 VR어플리케이션을 만들어 보았습니다—. A-FRAME... Angular초A-Framemonaca온 등봉 OnsenUI 메뉴와 탭 바를 결합하여 사용하는 샘플 OnsenUI2를 사용해 웹 페이지를 모바일 대응으로 하는 심플한 샘플을 소개한다고 명언하고 나서, 어떻게 할까~라고 생각하기 시작해, 모바일 같게 하는 시작에는 메뉴와 탭 바의 사용이 좋을까라고 생각했으므로, 이것을 조합한 페이지를 만드는 방법을 소개합니다. 에서 메뉴를 사용할 수 있는 템플릿에서 프로젝트를 생성하면 손쉽게 메뉴 기능을 얻을 수 있으므로, 이것에 탭 바를 추가하는 흐름으로 ... HTML5온 등봉monaca Onsen UI 2 + Monaca에서 옷 관리 앱을 만든 메모 자신의 태그를 채우는 것만으로 네이티브 앱 같은 UI를 만들 수 있는 라이브러리입니다. 나는 디자인을 전혀 할 수 없기 때문에 태그 조합만으로 멋지게 보이는 UI를 만들 수 있다는 것은 매우 도움이됩니다. iOS(플랫 디자인) 페이지를 보면, 각 컴퍼넌트의 사용법은 곧바로 알 수 있습니다. 이번에 만든 앱은 다음과 같은 구조로 되어 있습니다만, 이것이 좀처럼 만들 수 없다! 우선은 간단하게,... 온 등봉monaca OnsenUI와 NiftyCloud와 AnglarJs를 결합해 보았습니다. (Monaca) 결론부터 말하면 Model=NiftyCloud,Controller = AnglarJS,View = OnsenUI라는 구성으로 만들어 보았습니다. 만드는 것에서 보면, 대부분 간단한 화면이므로, 간편하게 하고 싶었던 것이, 무학으로 흠뻑 빠르면 의외로 귀찮았다. OnsenUI만으로는, 복수 페이지로 JavaScript를 분할하는 것이 어렵다. . 아무래도 AnglarJS와의 조합이 된다. (O... 온 등봉NiftyCloudmonacaangularjs Onsen Theme Roller에서 만든 Theme을 Monaca에서 만든 앱으로 가져 오는 방법. 를 보고 Theme을 작성. 만든 Theme 다운로드 다운로드 한 onsen-css-components.css를 onsen-css-components-cus.css로 이름을 바꿉니다. lib/onsenui/css 아래에 이름이 바뀐 파일을 업로드. (components에 onsenui 폴더가있을 수 있지만 그곳은 무시) 4.index.html을 다시 씁니다. index.html 다시 쓰기 후... 온 등봉monaca React + OnsenUI for React의 기본 구성 요소 ② (Navigator, Toolbar) 에 이어, OnsenUI for React의 기본 컴퍼넌트에 대해서 해설해 갑니다. 의 천이 상태를 관리하는 와, 자주 있는 툴바의 UI를 간단하게 구현할 수 있는 의 네 가지 구성 요소만으로 간단한 전환 앱을 만들었습니다. 각 페이지의 전환 상태를 관리하는 구성 요소입니다. 는 각 페이지 그 자체를 나타내는 컴퍼넌트이지만, 그러한 페이지의 천이 상태나 천이시의 액션·애니메이션등을 관리하는 ... React자바스크립트es6monaca온 등봉 React + OnsenUI for React의 기본 컴포넌트① (Page・Button편) 지금까지 OnsenUI에서 하이브리드 앱을 개발할 때는 OnsenUI 1.x (AngularJS 1.x 기반)에서 개발했지만 React에서도 쓰고 싶었기 때문에 OnsenUI 2.x (OnsenUI for React) 의 각종 ReactComponent의 사용법에 대해 정리한다. OnsenUI 1.x의 에 해당하는 구성 요소입니다. Page 컴포넌트 내에서 Page 구성 요소의 props로 ... React자바스크립트es6monaca온 등봉 Monaca에서 OnsenUI 2 Beta.9를 사용하면 상태 표시 줄 여백이 어려워집니다. 어제 출시된 Beta.9에 손을 줬다는 좋은 문제가 발견되었다. ※ OnsenUI 2 rc.1에서 수정 완료 본래 확보될 여백 외에 또 한 단계 여백이 붙어 버린다. 「저장→라이브리 로드」라고 하면 여백이 정상으로 돌아올 때가 있다. ons-spllitter를 사용한 것이 나쁜 것일지도 모른다. 현재 조사 중. 출처 우선 상태 표시줄 표시 자동 조정을 비활성화하고, index.html 헤더에... 온 등봉monaca monaca에서 스마트 폰 앱을 만들자 #6 일반적으로 앱은 여러 페이지로 구성됩니다. 목록 페이지와 상세 페이지. 그런 이유로 monaca에서도 페이지 전환을 시도합니다. 하는 것은 간단하고 마지막으로 만든 page1.html의 ons-list-item에 ng-click를 추가하기 만하면됩니다. myNavigator 가 키모로 페이지 전환을 제어하고 있습니다. 페이지의 스택을 관리하고 있습니다. 덧붙여서 myNavigator 는 in... Angular온 등봉monaca monaca에서 스마트 폰 앱을 만들자 #5 MVC의 V(html), C(Controller)에 이어 M의 역할을 담당하는 Service를 사용해 보겠습니다. Model 관련 처리를 Service 내에 캡슐화함으로써 백엔드를 MySQL이지만 Oracle이지만 Google Cloud Endpoints일지라도 다른 레이어에 영향을 주지 않고 자유자재로 전환할 수 있습니다. 실제로는 백엔드를 바꾸는 것은 거의 없기 때문에(그렇지요?) 그래서... Angular온 등봉monaca monaca에서 스마트 폰 앱을 만들자 #4 디자인은 알았다. 다음은 구현이다. 그래서 동적으로 목록을 생성해 보겠습니다. 생성된 Page1Controller.js에 배열 정의 Page1Controller.js page1.html 수정 page1.html 추가 수정 page1.html 이제 정적 코드와 디스플레이와 동일합니다.... Angular온 등봉monaca Onsen UI 및 Monaca 정보 모바일 앱의 UI를 쉽게 만들 수 있는 Onsen UI와 Monaca에 대해 살펴보았습니다. 모바일 앱 개발에 특화된 UI 프레임워크로 네비게이션 기능과 UI 컴포넌트 기능을 가지고 있습니다. HTML5를 사용하면 화면 전환과 화면 효과로 전환을 포함하는 UI를 쉽게 만들 수 있습니다. 주요 특징 * 모바일 앱 작성에 필요한 UI 기능을 풍부하게 제공 페이지 천이시의 애니메이션, 버튼, 탭 ... 온 등봉monaca React JS × Onsen UI 입문 공식 페이지 아래 공식 사이트에서 발췌 모바일 앱 개발에 특화된 UI 구성 요소 모음 네이티브 iOS 및 안드로이드 디자인 가이드를 준수하는 디자인과 기능을 가지고 무료로 사용할 수 있으며 완전히 오픈 소스 소프트웨어 Onsen UI가 흡수하는 각 OS의 UI 차이 예를 들어, 안드로이드에서는 탭이 UI에서는 위에 있는 것이 표준이 되고, iOS에서는 탭이 UI에서는 아래에 있는 것이 표준이... iOSReact온 등봉안드로이드
Onsen UI를 기초부터 내부 구조까지 이해하기 위한 슬라이드 모음 Onsen UI 개발 멤버의 입니다. 그 때문에 최근에는 Onsen UI의 개발·실장에 자원을 전부 휘두르는 것을 앞두고, 국내에서의 주지 활동의 일환으로서 이벤트로의 등단을 실시하고 있습니다. Onsen UI는 2016/09/15에 버전 2의 정식 릴리스를 맞이했습니다. 이 슬라이드는 그 전에 Onsen UI 2의 새로운 기능(Material Design 지원, 프레임워크 독립적, Auto... WebComponents코르도바하이브리드 앱온 등봉ProgressiveWebApps [monaca][onsenui][AngularJS][ui-router]onsenui/ui-router 최소 프로젝트 monaca에서 onsenui와 ui-router를 동시에 도입하는 데는 약간의 시간이 걸리므로 최소한의 프로젝트를 구성하는 방법을 절차화해 보았습니다. "Onsen UI V2 Angular 1 Minimum"에 "angular-ui-router"만 도입하면 다음 오류가 발생합니다. index.html 자바 스크립트의로드 순서가 원래로드해야하는 순서와 다르기 때문에 (그렇습니다) loader... Angularui-router온 등봉monaca Onsen UI로 VR 앱도 얼굴 인식 앱도, 로봇 연계 앱도 만들어 보았다. 3, 4년 정도 전부터 Onsen UI를 사용한 앱을 만들어 왔습니다! 이번은 모처럼이므로 최근 Onsen UI를 사용하여 만들어 보았던 앱을 몇 가지 소개합니다. 다만, Pokémon GO 가 폭발적인 히트를 날리고 있을 무렵,Mozilla 로부터 라고 하는 WebVR 프레임워크가 나와 있는 것을 알고, 라고 생각 Pokémon GO풍의 VR어플리케이션을 만들어 보았습니다—. A-FRAME... Angular초A-Framemonaca온 등봉 OnsenUI 메뉴와 탭 바를 결합하여 사용하는 샘플 OnsenUI2를 사용해 웹 페이지를 모바일 대응으로 하는 심플한 샘플을 소개한다고 명언하고 나서, 어떻게 할까~라고 생각하기 시작해, 모바일 같게 하는 시작에는 메뉴와 탭 바의 사용이 좋을까라고 생각했으므로, 이것을 조합한 페이지를 만드는 방법을 소개합니다. 에서 메뉴를 사용할 수 있는 템플릿에서 프로젝트를 생성하면 손쉽게 메뉴 기능을 얻을 수 있으므로, 이것에 탭 바를 추가하는 흐름으로 ... HTML5온 등봉monaca Onsen UI 2 + Monaca에서 옷 관리 앱을 만든 메모 자신의 태그를 채우는 것만으로 네이티브 앱 같은 UI를 만들 수 있는 라이브러리입니다. 나는 디자인을 전혀 할 수 없기 때문에 태그 조합만으로 멋지게 보이는 UI를 만들 수 있다는 것은 매우 도움이됩니다. iOS(플랫 디자인) 페이지를 보면, 각 컴퍼넌트의 사용법은 곧바로 알 수 있습니다. 이번에 만든 앱은 다음과 같은 구조로 되어 있습니다만, 이것이 좀처럼 만들 수 없다! 우선은 간단하게,... 온 등봉monaca OnsenUI와 NiftyCloud와 AnglarJs를 결합해 보았습니다. (Monaca) 결론부터 말하면 Model=NiftyCloud,Controller = AnglarJS,View = OnsenUI라는 구성으로 만들어 보았습니다. 만드는 것에서 보면, 대부분 간단한 화면이므로, 간편하게 하고 싶었던 것이, 무학으로 흠뻑 빠르면 의외로 귀찮았다. OnsenUI만으로는, 복수 페이지로 JavaScript를 분할하는 것이 어렵다. . 아무래도 AnglarJS와의 조합이 된다. (O... 온 등봉NiftyCloudmonacaangularjs Onsen Theme Roller에서 만든 Theme을 Monaca에서 만든 앱으로 가져 오는 방법. 를 보고 Theme을 작성. 만든 Theme 다운로드 다운로드 한 onsen-css-components.css를 onsen-css-components-cus.css로 이름을 바꿉니다. lib/onsenui/css 아래에 이름이 바뀐 파일을 업로드. (components에 onsenui 폴더가있을 수 있지만 그곳은 무시) 4.index.html을 다시 씁니다. index.html 다시 쓰기 후... 온 등봉monaca React + OnsenUI for React의 기본 구성 요소 ② (Navigator, Toolbar) 에 이어, OnsenUI for React의 기본 컴퍼넌트에 대해서 해설해 갑니다. 의 천이 상태를 관리하는 와, 자주 있는 툴바의 UI를 간단하게 구현할 수 있는 의 네 가지 구성 요소만으로 간단한 전환 앱을 만들었습니다. 각 페이지의 전환 상태를 관리하는 구성 요소입니다. 는 각 페이지 그 자체를 나타내는 컴퍼넌트이지만, 그러한 페이지의 천이 상태나 천이시의 액션·애니메이션등을 관리하는 ... React자바스크립트es6monaca온 등봉 React + OnsenUI for React의 기본 컴포넌트① (Page・Button편) 지금까지 OnsenUI에서 하이브리드 앱을 개발할 때는 OnsenUI 1.x (AngularJS 1.x 기반)에서 개발했지만 React에서도 쓰고 싶었기 때문에 OnsenUI 2.x (OnsenUI for React) 의 각종 ReactComponent의 사용법에 대해 정리한다. OnsenUI 1.x의 에 해당하는 구성 요소입니다. Page 컴포넌트 내에서 Page 구성 요소의 props로 ... React자바스크립트es6monaca온 등봉 Monaca에서 OnsenUI 2 Beta.9를 사용하면 상태 표시 줄 여백이 어려워집니다. 어제 출시된 Beta.9에 손을 줬다는 좋은 문제가 발견되었다. ※ OnsenUI 2 rc.1에서 수정 완료 본래 확보될 여백 외에 또 한 단계 여백이 붙어 버린다. 「저장→라이브리 로드」라고 하면 여백이 정상으로 돌아올 때가 있다. ons-spllitter를 사용한 것이 나쁜 것일지도 모른다. 현재 조사 중. 출처 우선 상태 표시줄 표시 자동 조정을 비활성화하고, index.html 헤더에... 온 등봉monaca monaca에서 스마트 폰 앱을 만들자 #6 일반적으로 앱은 여러 페이지로 구성됩니다. 목록 페이지와 상세 페이지. 그런 이유로 monaca에서도 페이지 전환을 시도합니다. 하는 것은 간단하고 마지막으로 만든 page1.html의 ons-list-item에 ng-click를 추가하기 만하면됩니다. myNavigator 가 키모로 페이지 전환을 제어하고 있습니다. 페이지의 스택을 관리하고 있습니다. 덧붙여서 myNavigator 는 in... Angular온 등봉monaca monaca에서 스마트 폰 앱을 만들자 #5 MVC의 V(html), C(Controller)에 이어 M의 역할을 담당하는 Service를 사용해 보겠습니다. Model 관련 처리를 Service 내에 캡슐화함으로써 백엔드를 MySQL이지만 Oracle이지만 Google Cloud Endpoints일지라도 다른 레이어에 영향을 주지 않고 자유자재로 전환할 수 있습니다. 실제로는 백엔드를 바꾸는 것은 거의 없기 때문에(그렇지요?) 그래서... Angular온 등봉monaca monaca에서 스마트 폰 앱을 만들자 #4 디자인은 알았다. 다음은 구현이다. 그래서 동적으로 목록을 생성해 보겠습니다. 생성된 Page1Controller.js에 배열 정의 Page1Controller.js page1.html 수정 page1.html 추가 수정 page1.html 이제 정적 코드와 디스플레이와 동일합니다.... Angular온 등봉monaca Onsen UI 및 Monaca 정보 모바일 앱의 UI를 쉽게 만들 수 있는 Onsen UI와 Monaca에 대해 살펴보았습니다. 모바일 앱 개발에 특화된 UI 프레임워크로 네비게이션 기능과 UI 컴포넌트 기능을 가지고 있습니다. HTML5를 사용하면 화면 전환과 화면 효과로 전환을 포함하는 UI를 쉽게 만들 수 있습니다. 주요 특징 * 모바일 앱 작성에 필요한 UI 기능을 풍부하게 제공 페이지 천이시의 애니메이션, 버튼, 탭 ... 온 등봉monaca React JS × Onsen UI 입문 공식 페이지 아래 공식 사이트에서 발췌 모바일 앱 개발에 특화된 UI 구성 요소 모음 네이티브 iOS 및 안드로이드 디자인 가이드를 준수하는 디자인과 기능을 가지고 무료로 사용할 수 있으며 완전히 오픈 소스 소프트웨어 Onsen UI가 흡수하는 각 OS의 UI 차이 예를 들어, 안드로이드에서는 탭이 UI에서는 위에 있는 것이 표준이 되고, iOS에서는 탭이 UI에서는 아래에 있는 것이 표준이... iOSReact온 등봉안드로이드